<script setup lang="ts">
import { Container, TabsContainer } from "@/models/containers";
import Dynamic from "@/components/Dynamic.vue";
import { zipWith } from "lodash-es";
import { ref } from "vue";

const props = defineProps<{ model: TabsContainer }>()
const model = props.model

const isFullWidth = model.mode === 'fullWidth'

const infos = zipWith(model.names, model.children, (name, children) => {
    return {
        name, children
    }
})


const activeName = ref(model.names[0])

function onclick(name: string) {
    activeName.value = name
}
</script>

<template>
    <div class="pybi-tabs" :data-tag="model.tag">
        <div class="header" :class="{ 'full-width': isFullWidth }">
            <div class="tab" :class="{ 'activate': info.name == activeName, 'full-width': isFullWidth }"
                v-for="info in infos" @click="onclick(info.name)">{{ info.name }}</div>
        </div>

        <div class="body">
            <template v-for="info in infos">
                <div v-if="activeName == info.name" style="width: 100%;">
                    <Dynamic v-for="(c, idx) in (info.children as Container).children" :component="c" :key="idx"></Dynamic>
                </div>
            </template>
        </div>
    </div>
</template>

<style scoped lang="less">
.body {
    display: flex;
    flex: 1 1 0%;

    &>div {
        width: 100%;
        position: relative;

        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(1, minmax(0px, 1fr));
    }
}


.header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 0.5em;

    &.full-width {
        justify-content: stretch;
    }
}


.tab {
    font-size: 1.25em;
    margin: 0.2em 0.5em;
    padding: 0.2em 0.5em;
    border-radius: 0.25em;
    min-width: 3em;
    text-align: center;
    cursor: pointer;

    &.activate {
        background: rgba(230, 229, 251);
        color: rgba(142, 70, 229);

        &.full-width {
            background: rgba(230, 229, 251, 0);
            border-bottom: 2px solid rgba(121, 121, 121, 0.397);
            color: rgb(0, 0, 0);
            border-radius: 0;
            margin: 0.2em 0;
            width: 100%;

            &.activate {
                color: rgba(142, 70, 229);
                border-bottom: 2px solid rgba(142, 70, 229);
            }
        }
    }
}
</style>